<template>
	<view>
		<!-- navbar -->
		<van-nav-bar z-index="200" :title="store.name" :border="false" title-class="custom-navbar-title" />
		<view class="order-title">
			<view class="order-title-1">
				<text class="order-title-1-name">{{store.name}} <text
						:style="{fontSize: '28rpx', color: store.status ? '#ee0a24' : '#999'}">({{store.status ? '营业中' : '休息中'}})</text></text>
				<OrderWay />
			</view>
			<view class="order-title-2">
				<view class="order-title-2-location">
					<van-icon name="location-o" />
					<text style="padding-left: 4rpx;">距离您{{store.distance}}</text>
				</view>
				<view @tap="show = true">
					<text>门店信息</text>
					<van-icon name="arrow-down" />
				</view>
			</view>
		</view>

		<view style="height: 100%;overflow: hidden;display: flex;">
			<view class="order-food-l">
				<van-sidebar :active-key="activeKey" @change="onChangeSidebar">
					<van-sidebar-item custom-class="order-van-sidebar-item" :title="item.title"
						:badge="item.count>0? item.count : null" v-for="(item, index) in goodsList" :key="index" />
				</van-sidebar>
			</view>
			<scroll-view @scroll="handleScroll" scroll-with-animation scroll-y
				:style="{width: 'calc(100vw - 200rpx)', height: height, backgroundColor: '#ffffff'}"
				:scroll-into-view="curView">
				<view class="order-food-r">
					<!-- <van-skeleton v-if="!showGoods" v-for="ski in 8" :key="ski" avatar-size="64px" title avatar-shape="square" avatar row="2" /> -->
					<view v-for="(food, index) in goodsList" :key="index" :id="`item${index}`">
						<view class="order-food-item" v-for="item in food.children" :key="item.id">
							<van-image lazy-load radius="8rpx" width="160rpx" height="160rpx"
								:src="base_url + item.image" />
							<view class="order-food-item-m">
								<text>{{item.goodsName}}</text>
								<view class="order-vip">
									<view class="order-vip-text">Vip</view>
									<view class="order-vip-price">&yen; {{item.discountPrice}}</view>
								</view>
								<view class="order-stepper">
									<text style="font-weight: bold;font-size: 36rpx;">&yen; {{item.price}}</text>
									<van-stepper button-size="22px" input-class="order-input-class"
										@change="orderChange(item, $event)" :input-width="item.count == 0 ? 0 : '32px'"
										:show-minus="item.count!==0" disable-input min="0" theme="round"
										:value="item.count" />
								</view>
							</view>
						</view>
					</view>
					<view style="height: 100rpx;" />
				</view>
			</scroll-view>
		</view>
		<!-- 购物袋 -->
		<van-submit-bar :disabled="isSubmit" :price="totalPrice * 100" :button-text="isSubmit ? `差${(store.miniAmount-totalPrice)}起送` : '确认下单' " @submit="onSubmit">
			<view class="bag-box">
				<van-icon name="shopping-cart" color="#000000" size="56rpx" @click="showCart = true" />
				<view class="bag-box-num" v-if="totalCount > 0">{{totalCount}}</view>
			</view>
		</van-submit-bar>
		<!-- 门店信息 -->
		<van-popup :overlay="false" :show="show" position="bottom" custom-style="height: 100%;">
			<view class="order-info-box">
				<view class="order-info-box-t">
					<text style="font-size: 36rpx;font-weight: bold;">{{store.name}}</text>
					<van-icon name="cross" color="#999999" size="48rpx" @click="show = false" />
				</view>
				<view class="order-info-box-m">
					<van-icon name="location-o" />
					<text style="padding-left: 4rpx;">距离您{{store.distance}}</text>
				</view>
				<view class="order-info-box-location">
					<text>门店地址</text>
				</view>
				<view class="order-info-box-m">
					<text style="padding-left: 4rpx;">{{store.location}}</text>
				</view>
				<view class="order-info-box-location">
					<text>联系电话</text>
				</view>
				<view class="order-info-box-m">
					<text style="padding-left: 4rpx;">{{store.phone}}</text>
				</view>
				<view class="order-info-box-location">
					<text>营业时间</text>
				</view>
				<view class="order-info-box-m">
					<!-- <view>
						<text style="padding-left: 4rpx;">24小时营业</text>
					</view> -->
					<view>
						<text style="padding-left: 4rpx;">{{store.busTime}}</text>
					</view>
				</view>
			</view>
		</van-popup>
		<!-- 购物车 -->
		<van-popup @close="showCart = false" :show="showCart" position="bottom" custom-style="height: 60%;">
			<view class="cart-popup-title">
				<text class="cart-popup-title-l">已选商品</text>
				<view class="cart-popup-title-r" @tap="clearCart">
					<van-icon name="delete-o" />
					<text style="padding-left: 8rpx;">清空购物车</text>
				</view>
			</view>
			<scroll-view scroll-y style="height: calc(80% - 72rpx);">
				<van-empty description="购物车是空的~" v-if="totalCount === 0" />
				<view class="order-food-item" v-for="item in checkedGoodsList" :key="item.id">
					<van-image lazy-load radius="8rpx" width="160rpx" height="160rpx" :src="base_url + item.image" />
					<view class="order-food-item-m">
						<text>{{item.title}}</text>
						<view class="order-vip">
							<view class="order-vip-text">Vip</view>
							<view class="order-vip-price">&yen; {{item.discountPrice}}</view>
						</view>
						<view class="order-stepper">
							<text style="font-weight: bold;font-size: 36rpx;">&yen; {{item.price}}</text>
							<van-stepper button-size="22px" input-class="order-input-class" @change="orderChange(item, $event)"
								:input-width="item.count == 0 ? 0 : '32px'" :show-minus="item.count!==0" disable-input
								min="0" theme="round" :value="item.count" />
						</view>
					</view>
				</view>
				<view style="height: 32rpx;" />
			</scroll-view>
		</van-popup>
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import OrderWay from '../../components/orderWay.vue';
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		base_url
	} from '../../utils/request.js';
	import Dialog from '@/wxcomponents/vant/dist/dialog/dialog.js';
	export default {
		components: {
			OrderWay
		},
		data() {
			return {
				// 购物车
				showCart: false,
				// 门店信息
				show: false,
				// 当前选中
				activeKey: 0,
				// 当前锚点
				curView: 'item0',
				// 所有top
				tops: [],
				timer: null,
				// 当前数量
				num: 0,
				base_url,
				showGoods: false,
			}
		},
		computed: {
			...mapState(['store', 'goodsList', 'checkedGoodsList']),
			...mapGetters(['totalCount', 'totalPrice']),
			height() {
				return this.scrollviewHeilght - 96 - 60 + 'px'
			},
			isSubmit() {
				return this.totalPrice < this.store.miniAmount;
			}
		},
		methods: {
			...mapActions(['setGoodsByItem', 'clearCarts']),
			// 清空购物车
			clearCart() {
				Dialog.confirm({
					context: this,
					title: '提示',
					message: '确认清空购物车吗?',
				}).then(() => {
					this.clearCarts();
				}).catch(() => {
					
				})
			},
			// 种类改变
			onChangeSidebar({
				detail
			}) {
				this.activeKey = detail; // 修改side
				this.curView = `item${detail}` // 修改锚点
			},
			// scroll
			handleScroll(e) {
				let top = e.detail.scrollTop;
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					for (let i = 0; i < this.tops.length; i++) {
						if (top < this.tops[i]) {
							this.activeKey = i;
							break;
						}
					}
					this.timer = null;
				}, 300)
			},
			// 去结账
			onSubmit() {
				if(this.totalCount == 0) {
					this.$slTip('未选中商品哦~');
					return;
				}
				this.$slNavigateTo('/pages/order/orders');
			},
			// 点加减
			orderChange(item, {
				detail
			}) {
				item.count = detail;
				this.setGoodsByItem({
					item
				})
			},
		},
		// created() {
		// 	setTimeout(() => {
		// 		this.showGoods = true;
		// 	}, 0)
		// },
		mounted() {
			const that = this;
			this.$nextTick(() => {
				setTimeout(() => {
					let query = wx.createSelectorQuery().in(this);
					that.goodsList.forEach((_, index) => {
						query.select(`#item${index}`).boundingClientRect();
					});
					query.exec(function(res) {
						that.tops = res.map(item => item.top);
					});
				}, 200)
			})
		}
	}
</script>

<style lang="scss">
	.van-skeleton {
		align-items: center!important;
	}
	.order-input-class {
		color: #000000 !important;
		font-weight: bold;
	}

	.van-submit-bar {
		bottom: calc(env(safe-area-inset-bottom) + 50px) !important;
		z-index: 201 !important;
	}

	.van-submit-bar__bar {
		background-color: #F7F8FA !important;
	}

	.van-submit-bar__safe {
		height: 0 !important;
	}

	.order-van-sidebar-item {
		text-align: center !important;
		font-size: 32rpx !important;
	}
	.van-sidebar-item--selected {
		color: #EE0A24!important;
	}

	.van-sidebar-item {
		width: 200rpx !important;
	}

	.order-info-box {
		height: 100%;
		padding: 16rpx 32rpx;
		padding-top: 180rpx;

		.order-info-box-t {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #000000;
			margin-bottom: 32rpx;
		}

		.order-info-box-location {
			margin-top: 32rpx;
			color: #000000;
			font-size: 32rpx;
			padding-bottom: 8rpx;
		}

		.order-info-box-m {
			color: #999999;
		}
	}

	.bag-box {
		position: relative;

		.bag-box-num {
			text-align: center;
			position: absolute;
			background-color: #ee0a24;
			line-height: 36rpx;
			font-size: 24rpx;
			height: 36rpx;
			border-radius: 18rpx;
			color: #FFFFFF;
			min-width: 36rpx;
			right: -20rpx;
			top: -20rpx;
		}
	}

	.cart-popup-title {
		padding: 0 32rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.cart-popup-title-r {
			color: #999999;
		}
	}
</style>
<style lang="scss" scoped>
	.order-title {
		height: 60px;
		padding: 0 32rpx;

		.order-title-1 {
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-title-1-name {
				font-size: 36rpx;
				color: #000000;
			}
		}

		.order-title-2 {
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-title-2-location {
				color: #999999;
			}
		}
	}

	.order-food-l {
		width: 200rpx;
		float: left;
		background-color: #F7F8FA;
	}

	.order-food-r {
		width: calc(100vw - 200rpx);
	}

	.order-food-item {
		display: flex;
		height: 160rpx;
		padding: 32rpx;

		.order-food-item-m {
			flex: 1;
			height: 160rpx;
			padding: 16rpx 0 16rpx 32rpx;

			.order-vip {
				display: flex;
				border-radius: 8rpx;
				overflow: hidden;
				text-align: center;
				height: 32rpx;
				line-height: 32rpx;
				font-size: 24rpx;
				margin: 16rpx 0;

				.order-vip-text {
					background-color: #000;
					color: #eecfa0;
					padding: 0 8rpx;
				}

				.order-vip-price {
					background-color: #eecfa0;
					color: #000;
					padding: 0 8rpx;
				}
			}

			.order-stepper {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
